<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="lib/layui/css/layui.css" media="all">
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="lib/layui/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a>会员管理</a>
				<a>会员列表</a>
			</span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
			 title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>

		<form class="layui-form" action="" id="searchForm">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">用户名:</label>
					<div class="layui-input-inline">
						<input type="text" name="username" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" />
					</div>

					<div class="layui-input-inline">
						<select name="sex" id="sex">
							<option value="">选择性别</option>
							<option value="1">男</option>
							<option value="0">女</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<button type="button" class="layui-btn" lay-submit onclick="searchForm()">搜索</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>

		</form>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
			<xblock>
				<button class="layui-btn" lay-event="add"><i class="layui-icon"></i>添加</button>
			</xblock>
		</div>
		</script>
		<table class="layui-hide" id="test1" lay-filter="test"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">禁用</a>
		</script>

		<script src="lib/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

		<script>
			var table;
			layui.use('table', function() {
				table = layui.table;

				//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
				//详见：https://www.layui.com/doc/modules/table.html#totalRow
				table.render({
					elem: '#test1',
					id: 'userTable',
					url: 'http://localhost:8888/usedcar/user/getAbleUsers?token='+document.cookie.split(";")[0],
					page: true,
					even:true,
					toolbar: '#toolbarDemo',
					title: '用户数据表',
					cols: [
						[{
							field: 'id',
							title: 'ID',
							width: 80,
							align:'center',
							sort: true,
							templet: function(res) {
								return '<b>' + res.id + '</b>'
							}
						}, {
							field: 'username',
							title: '用户名',
							width: 120
						}, {
							field: 'password',
							title: '密码',
							width: 150,
							templet: function(res) {
								return '<em>' + res.password + '</em>'
							}
						}, {
							field: 'phone',
							title: '手机号码',
							width: 150,
							hide:true
						}, {
							field: 'sex',
							title: '性别',
							width: 80,
							edit: 'text',
						}, {
							field: 'note',
							title: '签名',
							width: 150
						}, {
							field: 'role',
							title: '角色',
							width: 150
						}, {
							fixed: 'right',
							title: '操作',
							toolbar: '#barDemo',
							width: 200
						}]
					],
					done: function(res, curr, count) {
						//如果是异步请求数据方式，res即为你接口返回的信息。
						//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
						//console.log(res);
						//得到当前页码
						//console.log(curr);
						//得到数据总量
						//console.log(count);

						$("[data-field='sex']").children().each(function() {
							if ($(this).text() == '1') {
								$(this).text("男")
							} else if ($(this).text() == '0') {
								$(this).text("女")
							}
						});
					}
				});
				//工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'add':
							parent.layer.open({
								type: 2, //2跳转到页面
								offset: 'auto',
								title: '添加用户',
								content: 'admin-add.html',
								area: ['1000px', '600px'],
								btnAlign: 'c',
								yes: function() {
									parent.layer.closeAll();
								},
								end: function() {
									window.location.reload();
								}
							});
							break;
					};
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data; //得到行数据
					var uid = obj.data.id; //得到行数据的id
					var $ = layui.jquery;

					console.log(data);
					if (obj.event === 'detail') { //查看详情
						layer.open({
							type: 2, //2跳转到页面
							offset: 'auto',
							title: '查看用户详情',
							content: 'user-detail.html',
							area: ['1000px', '600px'],
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index); //少了这个是不能从父页面向子页面传值的
								//获取子页面的元素，进行数据渲染
								console.log(data.id);
								//console.log(body.html()) //得到iframe页的body内容
								body.contents().find("#id").val(data.id);
								body.contents().find('#username').val(data.username);
								body.contents().find('#pass').val(data.password);
								body.contents().find('#phone').val(data.phone);
								body.contents().find('#sex').val(data.sex == 1 ? "男" : "女");
								body.contents().find('#note').val(data.note);
								body.contents().find('#role').val(data.role);
							},
							yes: function() {
								parent.layer.closeAll();
							}
						});
					} else if (obj.event === 'del') { //禁用
					
						layer.confirm('真的禁用该用户吗？', function(index) {
							//后台禁用数据
							obj.del();//删除该行数据
							layer.close(index);//关闭弹出框
							$.post("http://localhost:8888/usedcar/user/disable?token="+document.cookie.split(";")[0],{id:uid}, function(response) {
								console.log(response);
								if (response == 1) {
									layer.msg("禁用成功");
								} else if (response == 0) {
									layer.msg("禁用失败");
								}
							});
						})
					} else if (obj.event === 'edit') { //编辑
						json = JSON.stringify(data);
						layer.open({
							type: 2, //2跳转到页面
							offset: 'auto',
							title: '修改用户详情',
							content: 'user-edit.html',
							area: ['1000px', '600px'],
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index); //少了这个是不能从父页面向子页面传值的
								//获取子页面的元素，进行数据渲染
								console.log("行数据id:" + data.id);
								console.log("行数据sex:" + data.sex);
								//console.log(body.html()) //得到iframe页的body内容
								body.contents().find("#id").val(data.id);
								body.contents().find('#username').val(data.username);
								body.contents().find('#password').val(data.password);
								body.contents().find('#phone').val(data.phone);
								body.contents().find('#sex').val(data.sex);
								body.contents().find('#note').val(data.note);
								body.contents().find('#roleId').val(data.role);
								//form.render(); //更新全部     
							},
							yes: function() {
								parent.layer.closeAll();
							},
							end: function() {
								window.location.reload();
							}
						});
					}
				});
			});
			/* 提交搜索表单 */
			function searchForm() {
				var username = $("#username").val();
				var sex = $("#sex").val();
				table.reload('userTable', {
					where: {
						username: username,
						sex: sex
					},
					page: {
						curr: 1
					}
				});
			}

			
		</script>

	</body>
</html>
